import { ForwardedRef, forwardRef, memo } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { Control, Controller } from 'react-hook-form';
import {
  Form,
  FormItemProps,
  Input,
  InputProps,
  InputRef,
  Tooltip, TooltipProps,
} from 'antd';
import { PasswordProps } from 'antd/es/input';
import QueueAnim from 'rc-queue-anim';

const RxInput = forwardRef<
  any,
  PropsWithChildren<
    {
      name: string;
      control: Control<any>;
      item?: FormItemProps;
      tooltip?: TooltipProps;
    } & Partial<InputProps> &
      Partial<InputRef> &
      Partial<PasswordProps>
  >
>(({ tooltip,name, control, item, ...rest }, ref) => {
  const animateConfig = [{ opacity: [1, 0], translateY: [0, 5] }];

  return (
    <Controller
      name={name}
      control={control}
      render={({ field, fieldState }) => (
        <div ref={ref}>
          <Tooltip
              {...tooltip}
          >
            <Form.Item {...item}>
              <Input.Password
                {...field}
                {...rest}
                autoComplete=""
              />
              <QueueAnim animConfig={animateConfig}>
                {fieldState.error && (
                  <p
                    className={'absolute leading-6 text-xs text-red-400'}
                    key={fieldState.error.message}
                  >
                    {fieldState.error?.message}
                  </p>
                )}
              </QueueAnim>
            </Form.Item>
          </Tooltip>
        </div>
      )}
    />
  );
});

export default memo(RxInput);
